import LogicFlow from '@logicflow/core'
import { Menu, Snapshot, MiniMap } from '@logicflow/extension'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

const config = {
  background: {
    backgroundColor: '#f2f2f2',
    // backgroundImage: 'url(./login_bg.png)',
  },
  grid: {
    visible: true,
    //   type: "mesh",
    size: 20,
    config: {
      color: '#ccc',
    },
  },

  // // 禁用配置  支持实例化LF后通过lf.updateEditConfig函数进行调整
  // isSilentMode:	false,	是否为静默模式
  // stopZoomGraph:	false,	禁止缩放画布
  // stopScrollGraph:	false,	禁止鼠标滚动移动画布
  // stopMoveGraph:	false,	禁止拖动画布

  adjustEdgeStartAndEnd: true,
  adjustEdge: true,
  hoverOutline: false,
  edgeSelectedOutline: false,
  // nodeTextDraggable: true,
  edgeTextDraggable: true,
  multipleSelectKey: 'meta',
  style: {
    nodeText: {
      overflowMode: 'autoWrap',
    },
  },
  keyboard: {
    enabled: true,
  },
}

class MyLogicFlow {
  constructor({ el }) {
    this.container = el
    this.lf = null

    this.init()
    this.setTheme()
    // return this.lf;
  }

  init() {
    this.lf = new LogicFlow({
      ...config,
      plugins: [Menu, MiniMap, Snapshot],
      container: this.container,
    })
  }

  setTheme() {
    // 设置主题
    this.lf.setTheme({
      circle: {
        stroke: '#000000',
        strokeWidth: 1,
        outlineColor: '#88f',
      },
      rect: {
        outlineColor: '#88f',
        strokeWidth: 1,
      },
      polygon: {
        strokeWidth: 1,
      },
      polyline: {
        stroke: '#000000',
        hoverStroke: '#000000',
        selectedStroke: '#000000',
        outlineColor: '#88f',
        strokeWidth: 1,
      },
      nodeText: {
        color: '#000000',
        textWidth: '0',
        overflowMode: 'autoWrap',
      },
      edgeText: {
        color: '#000000',
        background: {
          fill: '#f7f9ff',
        },
      },
    })
  }

  setSilentMode(isSilent) {
    this.lf.setProperties({
      isSilentMode: isSilent,
    })
  }
}

export default MyLogicFlow
